<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :width="1120"
    :height="630"
    :centered="true"
    :footer="null"
    :closable="false"
  >
    <carousel arrows>
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined />
        </div>
      </template>
      <Image
        :width="1120"
        :height="630"
        :src="item"
        v-for="(item, index) of imgList"
        :key="index"
        :preview="false"
      />
      <!--      <Image
        :width="1120"
        :height="630"
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      />-->
    </carousel>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Carousel, Image } from 'ant-design-vue';
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
  import { isArray } from '/@/utils/is';

  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, Carousel, Image, LeftCircleOutlined, RightCircleOutlined },
    setup(_) {
      const imgList = ref<any>([]);

      const [registerModal] = useModalInner(async ({ honorAssets }) => {
        if (isArray(honorAssets)) {
          imgList.value = honorAssets;
        } else {
          imgList.value = JSON.parse(honorAssets);
        }
      });

      return { registerModal, imgList };
    },
  });
</script>

<style lang="less">
  .ant-modal-header {
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
    border-bottom: 0 solid #f0f0f0;
    border-radius: 2px 2px 0 0;
  }
  .ant-modal-content {
    position: relative;
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    pointer-events: auto;
  }
  .ant-modal .ant-modal-body > .scrollbar {
    padding: 0;
  }

  .scroll-container .scrollbar__wrap {
    margin-bottom: 0 !important;
  }
</style>
<style scoped>
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 630px;
    line-height: 160px;
    background: #364d79;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.5;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }
</style>
